<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Toolbars</title>
  <meta name="description" content="Contains actions, indicators, and navigation associated with the current view">
  <!--
    - This <style> and <link> is only used for the example preview,
    - they are not required for the real use case.
    -->
  <link rel="stylesheet" href="buttons.css">
  <link rel="stylesheet" href="toolbars.css">
  <link rel="stylesheet" href="icons.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }

    body {
     background: none;
    }

    h2.bb-docs {
      font-size: 1.8rem;
      font-weight: lighter;
      color: #666;
      margin: -0.1rem 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 0.1rem #e8e8e8;
    }

    div[role="toolbar"] {
      position: relative;
      margin: 1rem 0 2rem 0;
    }

  </style>
</head>

<body role="application">
  <h2 class="bb-docs">Default toolbar</h2>
  <div role="toolbar">
    <ul>
      <li><button>Log out</button></li>
    </ul>
    <ul>
      <li><button class="icon icon-good text">like</button></li>
      <li><button class="icon icon-bad">dislike</button></li>
    </ul>
  </div>

  <h2 class="bb-docs">Theme A toolbar</h2>
  <div role="toolbar" class="theme-A">
    <ul>
      <li><button>Log out</button></li>
    </ul>
    <ul>
      <li><button class="icon icon-good text">like</button></li>
      <li><button class="icon icon-bad">dislike</button></li>
    </ul>
  </div>

  <h2 class="bb-docs">Theme B toolbar</h2>
  <div role="toolbar" class="theme-B">
    <ul>
      <li><button>Log out</button></li>
    </ul>
    <ul>
      <li><button class="icon icon-good text">like</button></li>
      <li><button class="icon icon-bad">dislike</button></li>
    </ul>
  </div>

  <h2 class="bb-docs">Theme C toolbar</h2>
  <div role="toolbar" class="theme-C">
    <ul>
      <li><button>Log out</button></li>
    </ul>
    <ul>
      <li><button class="icon icon-good text">like</button></li>
      <li><button class="icon icon-bad">dislike</button></li>
    </ul>
  </div>

  <h2 class="bb-docs">Theme D toolbar</h2>
  <div role="toolbar" class="theme-D">
    <ul>
      <li><button>Log out</button></li>
    </ul>
    <ul>
      <li><button class="icon icon-good text">like</button></li>
      <li><button class="icon icon-bad">dislike</button></li>
    </ul>
  </div>
</body>
</html>
